let img = document.querySelectorAll(".imgBox>ul>li");
let previous = document.querySelector(".previous");
let next = document.querySelector(".next");
let num = 0;

img.forEach(function(item, index) {
    item.setAttribute("num", index);

    next.addEventListener("click", function() {
        img[num].classList.remove("front");
        ++num;
        if (getComputedStyle(img[index]).num === num) {
            img[index].classList.add("front")
        }
    });
});